<template>
    <div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="全部消息" name="first">
                <div>
                <span>暂不支持点击查看以及审核功能，请前往网页端操作</span>
                <el-button
                size="mini"
                type="primary"
                style="margin-left: 10px;"
                @click="openUrl"
                >打开网页</el-button>
                </div>
                <xx-table
                v-loading="loading"
                :showDefalutButton="false"
                :showDefalutExpand="false"
                :showDefalutTools="false"
                :tableData="tableData">
                    <template v-slot:content="slotProps">
                        <div v-html="slotProps.item.content"></div>
                    </template>
                </xx-table>
            </el-tab-pane>
            <el-tab-pane label="未读消息" name="second">
                <xx-table
                v-loading="loading"
                style="    margin-top: -20px;"
                :showDefalutButton="false"
                :showDefalutExpand="false"
                :showDefalutTools="false"
                :tableData="noReadtableData">
                    <template v-slot:content="slotProps">
                        <div v-html="slotProps.item.content"></div>
                    </template>
                </xx-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import XxTable from '../../components/XxTable.vue'
import { shell } from 'electron'
export default {
    components: { XxTable },
    data() {
        return {
            activeName: 'first',
            loading: true,
            tableData: {
                pages: 1,
                header: [
                    {
                        label: '内容',
                        prop: 'content',
                        type: 'no-editslot'
                    },
                    {
                        label: '时间',
                        width: '150',
                        prop: 'sendTime'
                    }
                ],
                data: []
            },
            noReadtableData: {
                pages: 1,
                header: [
                    {
                        label: '内容',
                        prop: 'content',
                        type: 'no-editslot'
                    },
                    {
                        label: '时间',
                        width: '150',
                        prop: 'sendTime'
                    }
                ],
                data: []
            }
        }
    },
    computed: {},
    async mounted() {
        const messages = (await this.getMessageList())
        this.tableData.data = messages
        this.noReadtableData.data = messages.filter(e => e.status != 1)
    },
    methods: {
        openUrl() {
            shell.openExternal('https://tuan.12355.net/')
        },
        async getMessageList() {
            const res = await fetch('https://tuanapi.12355.net/api/v1/admin/message/findAllMessage?page=1&pageSize=50&status=&type=0&_=1645583557278', {
                headers: {
                    accept: 'application/json, text/javascript, */*; q=0.01',
                    'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
                    authorize_name: this.$store.state.oid,
                    'cache-control': 'no-cache',
                    'content-type': 'application/json',
                    pragma: 'no-cache',
                    'sec-ch-ua': '"Chromium";v="92", " Not A;Brand";v="99", "Microsoft Edge";v="92"',
                    'sec-ch-ua-mobile': '?0',
                    'sec-fetch-dest': 'empty',
                    'sec-fetch-mode': 'cors',
                    'sec-fetch-site': 'same-site',
                    Cookie: this.$store.state.cookie
                },
                referrer: 'https://tuan.12355.net/',
                referrerPolicy: 'strict-origin-when-cross-origin',
                method: 'GET',
                mode: 'cors',
                credentials: 'include'
            })
            this.loading = false
            const temp = await res.json()
            console.log(temp)
            return temp.listData
        }
    }
}
</script>

<style
XxTable>

</style>
